<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<template id="cpn_id">
    <div>
       <p>{{cmovies}}</p>
       <p>{{localstr}}</p>
       <input type="text" v-model="numb"/>
        <!--测试在子组件上修改父组件传给子组件的值的修改-->
        <button v-on:click="changeMovies">按钮1</button>
    </div>
</template>
<body>
<div id="div_id">
    <!--这里用v-bind是因为props是属性,通过v-bind将movies和cmovies绑定在一起,此处不写无法传值-->
    <cpn1 v-bind:cmovies="movies" v-bind:message="msg" v-bind:numb="num" v-on:changemsg="changemessage"></cpn1>
    <!--测试在父组件上修改父组件传给子组件的值的修改-->
    <button v-on:click="changeMovies">按钮2</button>
    <p>{{num}}</p>
    <p>{{msg}}</p>
</div>
<script>
    //如果这里写成 Vue.component 会报错，为什么？
    const cpn1={
        template:"#cpn_id",
        //利用子组件的props属性来接受父组件传递来的值，那么如果值被修改会怎么样？
        //部分类型可以修改成功(Array)，部分类型会失败(number,string)
        //写法1
        props:{
            cmovies:{
                type:Array,
                default:[]
            },
            message:{
                type: String,
                default: ""
            },
            numb:{
                type:Number,
                default: 0
            }
        },
        //data中return的数据是重新分配的数据，和message已经没有绑定关系
        data(){
            return{
              localstr:this.message
            }
        },
        //写法2
        /*props:["cmovies"],*/
        //写法3
       /* props:{
            cmovies:Array
        },*/
        methods:{
            //当父组件中的值发生变化时，会影响到子组件
            changeMovies(){
                //this.cmovies.push('4');
                //this.numb=5;
                //父组件向子组件传递的值类型是字符串时，会有警告信息
                //this.message="445566"
                //子组件向父组件传递消息,让父组件修改数据，子组件自动渲染
                this.$emit("changemsg",'445566')
            }
        }
    };
    const app=new Vue({
        el:"#div_id",
        data:{
            movies:['1','2','3'],
            msg:"mmssgg",
            num:1
        },
        methods:{
            //当父组件中的值发生变化时，会影响到子组件
            changeMovies(item){
                this.movies.push(item);
            },
            changemessage(item){
                this.msg=item;
            }
        },
        components:{
          cpn1:cpn1
        }
    });
</script>
</body>
</html>